<template>
  <el-dialog title="修改角色" :visible.sync="visible" @close="onClose">
    <el-form :model="formData" ref="form">
      <el-form-item label="角色ID" :label-width="formLabelWidth" readonly>
        <el-input v-model="formData.roleId" readonly autocomplete="off"></el-input>
      </el-form-item>

      <el-form-item label="角色名称" :label-width="formLabelWidth" required>
        <el-input v-model="formData.roleName" autocomplete="off"></el-input>
      </el-form-item>

      <el-form-item label="角色权限字符串" :label-width="formLabelWidth" required>
        <el-input v-model="formData.roleKey" autocomplete="off"></el-input>
      </el-form-item>

      <el-form-item label="显示顺序" :label-width="formLabelWidth" required>
        <el-input v-model="formData.roleSort" autocomplete="off"></el-input>
      </el-form-item>

      <el-form-item label="数据范围" :label-width="formLabelWidth" >
        <el-input v-model="formData.dataScope" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="菜单权限" :label-width="formLabelWidth">
        <el-checkbox v-model="menuExpand" @change="handleCheckedTreeExpand($event, 'menu')">展开/折叠</el-checkbox>
        <el-checkbox v-model="menuNodeAll" @change="handleCheckedTreeNodeAll($event, 'menu')">全选/全不选</el-checkbox>
        <el-checkbox v-model="formData.menuCheckStrictly" @change="handleCheckedTreeConnect($event, 'menu')">父子联动
        </el-checkbox>
        <el-tree
            class="tree-border"
            :data="menuOptions"
            show-checkbox
            ref="menu"
            node-key="id"
            :check-strictly="!formData.menuCheckStrictly"
            empty-text="加载中，请稍候"
            :props="defaultProps"
        ></el-tree>
      </el-form-item>
<!--      <el-form-item label="菜单树选择项是否关联显示" :label-width="formLabelWidth" >-->
<!--        <el-input v-model="formData.menuCheckStrictly" autocomplete="off"></el-input>-->
<!--      </el-form-item>-->

<!--      <el-form-item label="部门树选择项是否关联显示" :label-width="formLabelWidth" >-->
<!--        <el-input v-model="formData.deptCheckStrictly" autocomplete="off"></el-input>-->
<!--      </el-form-item>-->

      <el-form-item label="角色状态" :label-width="formLabelWidth" required>
        <el-input v-model="formData.status" autocomplete="off"></el-input>
      </el-form-item>

      <el-form-item label="删除标志" :label-width="formLabelWidth" >
        <el-input v-model="formData.delFlag" autocomplete="off"></el-input>
      </el-form-item>

      <el-form-item label="创建者" :label-width="formLabelWidth" readonly>
        <el-input v-model="formData.createBy" autocomplete="off"></el-input>
      </el-form-item>


      <el-form-item label="更新者" :label-width="formLabelWidth" readonly>
        <el-input v-model="formData.updateBy" autocomplete="off"></el-input>
      </el-form-item>


      <el-form-item label="备注" :label-width="formLabelWidth" >
        <el-input v-model="formData.remark" autocomplete="off"></el-input>
      </el-form-item>



    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="onClose">取 消</el-button>
      <el-button type="primary" @click="onSubmit">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import {updateSysRole, getOneSysRole} from "@/api/sys/role";
import {roleMenuTreeselect,treeselect} from "@/api/sys/menu";

export default {
  name: 'SysRoleUpdate',
  props: {
    visible: false,
  },
  data() {
    return {
      formData: {
        menuIds:[],

      },
      formLabelWidth: '120px',
      defaultProps: {
        children: "children",
        label: "label"
      },
      menuExpand: false,
      menuNodeAll: false,
      // 菜单列表
      menuOptions: [],
      // 表单校验
    };
  },
  methods: {
    loadData(id) {
      console.log('loadData',id)
      if (id > 0) {
        getOneSysRole(id).then(res => {
          this.formData = res
          const roleMenu = this.getRoleMenuTreeselect(id);
          this.$nextTick(() => {
            roleMenu.then(res => {
              let checkedKeys = res.checkedKeys
              checkedKeys.forEach((v) => {
                this.$nextTick(() => {
                  this.$refs.menu.setChecked(v, true, false);
                })
              })
            });
          });

        });
      }
    },
    /** 根据角色ID查询菜单树结构 */
    getRoleMenuTreeselect(roleId) {
      return roleMenuTreeselect(roleId).then(response => {
        this.menuOptions = response.menus;
        return response;
      });
    },
    // 所有菜单节点数据
    getMenuAllCheckedKeys() {
      // 目前被选中的菜单节点
      let checkedKeys = this.$refs.menu.getCheckedKeys();
      // 半选中的菜单节点
      let halfCheckedKeys = this.$refs.menu.getHalfCheckedKeys();
      checkedKeys.unshift.apply(checkedKeys, halfCheckedKeys);
      return checkedKeys;
    },
    // 树权限（展开/折叠）
    handleCheckedTreeExpand(value, type) {
      if (type == 'menu') {
        let treeList = this.menuOptions;
        for (let i = 0; i < treeList.length; i++) {
          this.$refs.menu.store.nodesMap[treeList[i].id].expanded = value;
        }
      } else if (type == 'dept') {
        let treeList = this.deptOptions;
        for (let i = 0; i < treeList.length; i++) {
          this.$refs.dept.store.nodesMap[treeList[i].id].expanded = value;
        }
      }
    },
    // 树权限（全选/全不选）
    handleCheckedTreeNodeAll(value, type) {
      if (type == 'menu') {
        this.$refs.menu.setCheckedNodes(value ? this.menuOptions : []);
      } else if (type == 'dept') {
        this.$refs.dept.setCheckedNodes(value ? this.deptOptions : []);
      }
    },
    // 树权限（父子联动）
    handleCheckedTreeConnect(value, type) {
      if (type == 'menu') {
        this.form.menuCheckStrictly = value ? true : false;
      } else if (type == 'dept') {
        this.form.deptCheckStrictly = value ? true : false;
      }
    },
    onSubmit() {
      this.$refs.form.validate(valid => {
        if (valid) {
          // 执行表单提交操作
          // this.formData 包含了通过校验的表单数据
          this.formData.menuIds = this.getMenuAllCheckedKeys();
          updateSysRole(this.formData).then(res => this.$emit('submit-success'));
          this.onClose()
        } else {
          console.log('Form validation failed');
        }
      });
    },
    onClose() {
      this.$emit('update:visible', false)
    },
  }
}
</script>

<style>
</style>
